<template>
  <div id="shopCart">
    <p>用户名：{{ userName }}</p>
    <hr />
    <h2>产品</h2>
    <product-list />
    <h2>购物车</h2>
    <shopping-cart />
  </div>
</template>

<script>
import ProductList from "./components/ProductList.vue";
import ShoppingCart from "./components/ShoppingCart.vue";

import { mapState } from "vuex";

export default {
  components: { ProductList, ShoppingCart },
  computed: mapState({
    userName: (state) => state.userInfo.userName,
  }),
};
</script>

<style scoped>
h2 {
  color: dodgerblue;
}
</style>
